<template>
  <div
    :class="[
      'px-3 py-2 text-sm cursor-pointer transition-colors duration-200',
      'text-text-primary hover:bg-background-700 hover:text-text-primary',
      disabled ? 'opacity-50 cursor-not-allowed hover:bg-transparent' : '',
      variant === 'danger' ? 'text-error hover:bg-error/10 hover:text-error' : ''
    ]"
    @click="handleClick"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  disabled?: boolean
  variant?: 'default' | 'danger'
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  variant: 'default'
})

const emit = defineEmits<{
  'click': [event: MouseEvent]
}>()

const handleClick = (event: MouseEvent) => {
  if (props.disabled) {
    event.preventDefault()
    return
  }
  
  emit('click', event)
}
</script>
